<template name="component-name">
  <el-row class="visual-main basic-frame">
    <el-col :span="item" v-for="item,index in spancols" :key="index"
      ><div class="border border1"></div>
      <div class="border border2"></div>
      <div class="border3"></div>
      <div class="chart-container">data</div></el-col
    >
    <!-- 
    <el-col :span="7"
      ><div class="border border1"></div>
      <div class="border border2"></div>
      <div class="border3"></div>
      <div class="chart-container">data</div></el-col
    >
    <el-col :span="10"
      ><div class="border border1"></div>
      <div class="border border2"></div>
      <div class="border3"></div>
      <div class="chart-container">data</div></el-col
    >
    <el-col :span="7"
      ><div class="border border1"></div>
      <div class="border border2"></div>
      <div class="border3"></div>
      <div class="chart-container">data</div></el-col
    >
    <el-col :span="7"
      ><div class="border border1"></div>
      <div class="border border2"></div>
      <div class="border3"></div>
      <div class="chart-container">data</div></el-col
    >
    <el-col :span="10"
      ><div class="border border1"></div>
      <div class="border border2"></div>
      <div class="border3"></div>
      <div class="chart-container">data</div></el-col
    >
    <el-col :span="7"
      ><div class="border border1"></div>
      <div class="border border2"></div>
      <div class="border3"></div>
      <div class="chart-container">data</div></el-col
    > -->
  </el-row>
</template>
<script>
export default {
  name: 'visualMain',
  props: ['spancols'],
}
</script>
<style lang="less" scoped>
</style>